﻿@{
    Layout = null;
    var objUserInfo = ViewBag.UserInfo as UserInfo;
}
@model ArticleResultInfo
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes">
    <meta name="format-detection" content="telephone=no,email=no">
    <title>@Model.ArticleInfo.ArticleTitle</title>
    <!-- 基础css begin -->
    <link type="text/css" rel="stylesheet" href="/Content/wuling/pkg/css/base.css">
    <!-- 基础css end -->
    <!-- 组件依赖css begin -->
    <link type="text/css" rel="stylesheet" href="/Content/wuling/css/widget/button/button.default.css">
    <link type="text/css" rel="stylesheet" href="/Content/wuling/css/widget/button/button.css">
    <link type="text/css" rel="stylesheet" href="/Content/wuling/css/widget/modal/modal.css">
    <link href="/Content/wuling/js/widget/swiper/swiper.min.css" rel="stylesheet" />
    <link href="/Content/wuling/js/widget/swiper/swiper.scale.css" rel="stylesheet" />
    <!-- 组件依赖css end -->
    <!-- 公用css begin -->
    <link type="text/css" rel="stylesheet" href="/Content/wuling/pkg/css/layout.css?ver=201511261334">
    <!-- 公用css end -->
    <!-- 页面css begin -->
    <link type="text/css" rel="stylesheet" href="/Content/wuling/css/lynn.css?ver=201511261334">
    <link type="text/css" href="/Content/wuling/css/fix.css" rel="stylesheet" />
    <!-- 页面css end -->
    <style>
        @@-webkit-keyframes load {
            from {
                -webkit-transform: rotate(0deg) translateZ(0);
            }

            to {
                -webkit-transform: rotate(360deg) translateZ(0);
            }
        }

        #article_content img, #article_content video {
            max-width: 100%;
        }
    </style>
</head>
<body id="detail">
    <div class="background-full" style="background: url(/Content/wuling/images/background.png) no-repeat center;"></div>
    <div id="wrapper">
        <div class="padding-0">
            <div class="content">
                <div style="padding-bottom: 0;">
                    <header>
                        <div id="AuthorAvatar" class="user-avatar float-left" style="background-image: url(@Model.ArticleInfo.S1);">
                            <div class="user-badge"></div>
                        </div>
                        <div class="user-name">
                            <span class="font-color">LV0</span>
                            <span id="article_username">@Model.ArticleInfo.ArticleAuthor</span>
                        </div>
                        <div id="article_title" class="article-title word-wrap">@Model.ArticleInfo.ApproveDate.ToString("yyyy-MM-dd")</div>
                        <div class="publish-time margin-top-10"> @Model.ArticleInfo.ArticleTitle</div>
                    </header>
                    <article>
                        <div id="article_content" class="word-wrap">
                            @Html.Raw(Model.ArticleContent)
                        </div>
                        @if (Model.ArticlePictureCollection.IsNoNull())
                        {
                            int i = 1;
                            <ul class="margin-top-10 margin-bottom-10 image-box" id="article_imagelist">
                                @foreach (var objArticlePicture in Model.ArticlePictureCollection)
                                {
                                    <li id="img@(i)" class="image image-cover" style="background-image: url(@objArticlePicture.PictureUrl)" data-url="@objArticlePicture.PictureUrl"></li>
                                    i++;
                                }
                            </ul>
                        }
                        <section class="actions" style="margin-bottom:0px;">
                            <div class="padding-bottom-0">
                                <span id="diggclass" @Html.Raw(Model.ArticleInfo.IsDigg ? "class=\"icon icon-praised\"" : "class=\"icon icon-ambia\"") class="icon icon-ambia" @Html.Raw(Model.ArticleInfo.IsDigg ? "" : "onclick=\"DiggArticle(" + Model.ArticleInfo.ArticleId + ")\"")></span>
                                <span id="diggcount" class="count">@Model.ArticleInfo.DiggCount</span>
                                <span class="icon icon-eyes"></span><span class="count">@Model.ArticleInfo.ViewCount</span>
                                <span id="btnComment" class="icon icon-comments"></span>
                                <span id="commentcount" class="count">@Model.ArticleInfo.CommentCount</span>
                            </div>
                            <div id="comment-input" class="relative" style="display:none;">
                                <div class="margin-top-10">
                                    <textarea id="txtComment" class="input-text width-full" data-emotion></textarea>
                                    <div class="text-align-right relative" style="margin-top:8px;">
                                        <i id="btnEmotionSelect" class="icon-emotion" style="position:absolute; left:0;"></i>
                                        <button id="btnSubmitComment" type="button" class="button" style="padding:3px 15px;" onclick="AddComment('@Model.ArticleInfo.ArticleId')">发表</button>
                                    </div>
                                </div>
                                <div data-part="emotion" style="display: none; margin-top: -20px;"></div>
                            </div>
                        </section>
                    </article>
                </div>
            </div>
            <section class="comments comment-padding" style="padding-top: 0;">
                <ul id="commentlist" class="comment-list"></ul>
                <div id="loadingText" class="text-center">正在加载...</div>
                @*<button id="comment_more" type="button" class="default-button margin-top-20 width-full" onclick="BindComments(10)" style="display: none;">更多评论</button>*@
            </section>
        </div>
    </div>
    <!-- 组件依赖js begin -->
    <script type="text/javascript" charset="utf-8" src="/Content/wuling/pkg/js/core.js"></script>
    <script type="text/javascript" charset="utf-8" src="/Content/wuling/js/widget/modal/modal.js"></script>
    <script src="/Content/wuling/js/widget/swiper/swiper.jquery.min.js"></script>
    <script src="/Content/wuling/js/widget/swiper/swiper.scale.js?ver=201512081026"></script>
    <script src="/Content/wuling/js/scroll/scrollpagination.js?ver=201512071548"></script>
    <script src="/Content/wuling/js/common.js?ver=201511261333"></script>
    <script type="text/javascript">
        $(function () {
            var userInfo = JSON.parse('@Html.Raw( objUserInfo.JsonSerialize())');
            BindComments(10);
            IncreaseArticle('@Model.ArticleInfo.ArticleId');
        });
        function BindComments(loadcount) {
            loadcount = loadcount || 10;
            $("#commentlist").scrollPagination({
                //contentPage: "/wuling/getarticlelist?categoryId=8&pageIndex=" + pageIndex + "&pageSize=" + pageSize,
                contentData: {},
                container: $(this),
                scrollTarget: $(window),
                heightOffset: 10,
                beforeLoad: function (options) {
                    $("#loadingText").show();
                    var commentId = $("#commentlist li:last").attr("data-id");
                    options.contentPage = "/wuling/getcommentlist?articleId=@Model.ArticleInfo.ArticleId&loadCount=" + loadcount + (typeof (commentId) == "undefined" ? "" : "&commentId=" + commentId);
                },
                appendItems: function (objInvokeResult) {
                    $("#loadingText").hide();

                    if (objInvokeResult.ResultCode == "CommentNull") {
                        //todo：移除更多事件
                        $("#comment_more").removeAttr("onclick");
                        $("#comment_more").hide();
                        //停止滚动加载
                        $("#commentlist").stopScrollPagination();
                        return;
                    }
                    if (objInvokeResult.ResultCode != "Success") {
                        alert(objInvokeResult.ResultMessage);
                        return;
                    }
                    if (objInvokeResult.Data.CommentList.length < loadcount) {
                        //停止滚动加载
                        $("#commentlist").stopScrollPagination();
                        $("#comment_more").removeAttr("onclick");
                        $("#comment_more").hide();
                    } else {
                        //$("#article_more").show();
                    }


                    var commentId = $("#commentlist li:last").attr("data-id");
                    var floor = $("#commentlist li:last").attr("data-floor");
                    if (typeof (floor) == "undefined" && objInvokeResult.Data.CommentCount != 0) {
                        floor = objInvokeResult.Data.CommentCount;
                    } else {
                        floor = parseInt(floor) - 1;
                    }

                    var html = "";
                    $.each(objInvokeResult.Data.CommentList, function (i, objCommentInfo) {
                        objCommentInfo.CreateDate = JsonToDate(objCommentInfo.CreateDate, false);
                        html += CreateCommentHtml(objCommentInfo, floor);
                        floor--;
                    });

                    $("#commentlist").append(html);
                },
                afterLoad: function (objInvokeResult) {

                }
            });
    }

    function CreateCommentHtml(objCommentInfo, floor) {
        var html = "";
        if (typeof (objCommentInfo) == "undefined") {
            return html;
        }
        html =
                '<li id="li_1" data-id="' + objCommentInfo.CommentId + '" data-floor="' + floor + '">' +
                    '<div class="font-size-14">' +
                        '<div id="avatar_' + floor + '" style="background-image: url(' + objCommentInfo.Avatar + ')" class="user-avatar float-left">' +
                            '<div class="user-badge"></div>' +
                        '</div>' +
                        '<div class="info cfix">' +
                            '<div class="user">' +
                                '<span class="font-color level">LV0</span>' + objCommentInfo.NickName +
                            '</div>' +
                            '<div class="floor">第' + floor + '楼</div>' +
                            '<div class="time">' + objCommentInfo.CreateDate + '</div>' +
                        '</div>' +
                    '</div><div class="comment">' + objCommentInfo.Content + '</div>' +
                '</li>';
        return html;
    }

    function DiggArticle(articleId) {
        var objAjaxEntity = new AjaxEntity();
        objAjaxEntity.url = "/wuling/diggarticle/" + articleId;
        objAjaxEntity.executeSuccess = function (objInvokeResult) {
            if (objInvokeResult.ResultCode != "Success") {
                alert(objInvokeResult.ResultMessage);
                return;
            }
            $("#diggcount").html(parseInt($("#diggcount").html()) + 1);
            $("#diggclass").removeClass("icon-ambia").addClass("icon-praised");
        }
        objAjaxEntity.execute();
    }

    function IncreaseArticle(articleId) {
        var objAjaxEntity = new AjaxEntity();
        objAjaxEntity.url = "/wuling/increaseviewcount/" + articleId;
        objAjaxEntity.executeSuccess = function (objInvokeResult) { };
        objAjaxEntity.execute();
    }

    function AddComment(articleId) {
        var content = $("#txtComment").val();//todo：读取内容
        if (content == "" || content.replace(/\s/g, "") == "") {
            alert("对不起，请您输入评论内容");
            return;
        }
        if (content.length > 400) {
            alert("内容不能超过400字");
            return;
        }
        var objAjaxEntity = new AjaxEntity();
        objAjaxEntity.url = "/wuling/addcomment";
        objAjaxEntity.data = { articleId: articleId, content: content };
        objAjaxEntity.executeSuccess = function (objInvokeResult) {
            if (objInvokeResult.ResultCode == "Success") {
                var floor = $("#commentlist li:first").attr("data-floor");
                if (typeof (floor) == "undefined") {
                    floor = 1;
                } else {
                    floor = parseInt(floor) + 1;
                }

                var objCommentInfo = {
                    CommentId: objInvokeResult.Data,
                    Avatar: "@objUserInfo.Avatar",
                    NickName: "@objUserInfo.UserName",
                    CreateDate: FormatDate(new Date(), false),
                    Content: content
                };
                $("#commentlist").prepend(CreateCommentHtml(objCommentInfo, floor));
                $("#comment-input").hide();
                $("#txtComment").val("");
                $("#commentcount").html(parseInt($("#commentcount").html()) + 1);
            } else {
                alert(objInvokeResult.ResultMessage);
            }
        }
        objAjaxEntity.execute();
    }



    $("#btnComment").click(toggleCommentInput);

    function toggleCommentInput() {
        if ($("#comment-input").is(":visible")) {
            $("#comment-input").hide();
        } else {
            $("#comment-input").show();
            $("#txtComment").focusin(function () {
                /* $(this).focusEnd();*/
            });
        }
    }

    $("#article_imagelist > li").on("click", function () {
        var mySwiper = slideImage({
            container: $(this).closest("ul"),
            selector: "li",
            current: $(this).index()
        });
    });


    //$("#article_content img").each(function (idx, el) {
    //    var $this = $(this);
    //    $this.attr("data-url", $this.attr("src"));
    //    $this.on("click", function () {
    //        slideImage({
    //            container: "#article_content",
    //            selector: "img",
    //            current: idx
    //        })
    //    });
    //});

    </script>
</body>
</html>